<!-- Pagination.vue -->
<template>
  <el-pagination 
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="pageSizes"
    :page-size="pageSize"
    :layout="layout"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  name: 'MyPagination',
  props: {
    currentPage: Number,  // 改为必填项
    pageSize: Number,     // 改为必填项
    total: {
      type: Number,
      required: true
    },
    pageSizes: {
      type: Array,
      default: () => [1,2, 3, 4, 5]
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  methods: {
    handleSizeChange(newSize) {
      // 触发事件并传递两个参数：新页码和新页容量
      this.$emit('page-change', 1, newSize) // 切换页容量后自动回到第一页
    },
    handleCurrentChange(newPage) {
      // 触发事件并传递两个参数：新页码和当前页容量
      this.$emit('page-change', newPage, this.pageSize)
    }
  }
}
</script>